<template>
  <div class="chart-container" ref="roseChart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      selectedItems: Array(6).fill(true),
      option: {
        legend: {
          x: 'center',
          y: 'bottom',

          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
          data: ['上限','上上限','下限','下下限','正跳变','负跳变']
        },
        series: [{
          name: '面积模式',
          type: 'pie',
          radius: ['15%', '60%'],  // 原为['30%', '100%']
          center: ['50%', '50%'],  // 原为['50%', '45%']
          roseType: 'area',
          data: [
            { name: '上限', value: 3, itemStyle: { color: '#ff7800' } },
            { name: '上上限', value: 4, itemStyle: { color: '#23eb6a' } },
            { name: '下限', value: 6, itemStyle: { color: '#7627cb' } },
            { name: '下下限', value: 7, itemStyle: { color: '#fffc00' } },
            { name: '正跳变', value: 9, itemStyle: { color: '#46afdb' } },
            { name: '负跳变', value: 10, itemStyle: { color: '#ff0000' } }
          ],
          label: {
            color: '#fff',
            fontSize: 12
          }
        }]
      },
      originalData: [3, 4, 6, 7, 9, 10]
    };
  },
  mounted() {
    this.initRoseChart();
  },
  methods: {
    toggleSelection(index) {
      this.$set(this.selectedItems, index, !this.selectedItems[index]);
      this.updateChart();
    },
    initRoseChart() {
      const chart = echarts.init(this.$refs.roseChart);
      chart.setOption(this.option);
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 85%;
  margin-top: -50px;
}
</style>
